import React, { useState } from 'react';

/**
 * useState Hook示例组件
 * 
 * 这个组件展示了React useState Hook的多种使用方式：
 * 1. 基本状态管理（字符串）
 * 2. 数字状态管理（计数器）
 * 3. 布尔状态管理（切换）
 * 4. 对象状态管理
 * 5. 数组状态管理
 * 6. 使用函数式更新
 */
function UseStateExample() {
  // 示例1: 基本的字符串状态
  const [name, setName] = useState('游客');
  
  // 示例2: 数字状态 - 计数器
  const [count, setCount] = useState(0);
  
  // 示例3: 布尔状态 - 切换
  const [isOn, setIsOn] = useState(false);
  
  // 示例4: 对象状态
  const [user, setUser] = useState({
    name: '张三',
    age: 25,
    email: 'zhangsan@example.com'
  });
  
  // 示例5: 数组状态
  const [items, setItems] = useState(['苹果', '香蕉', '橙子']);
  
  // 处理名称输入变化
  const handleNameChange = (e) => {
    setName(e.target.value);
  };
  
  // 增加计数器
  const incrementCount = () => {
    // 示例6: 函数式更新 - 当新状态依赖于之前的状态时推荐使用
    setCount(prevCount => prevCount + 1);
  };
  
  // 减少计数器
  const decrementCount = () => {
    setCount(prevCount => prevCount - 1);
  };
  
  // 切换开关状态
  const toggleSwitch = () => {
    setIsOn(prevState => !prevState);
  };
  
  // 更新用户对象的一个属性
  const updateUserEmail = (e) => {
    // 当更新对象状态时，需要保留其他属性
    setUser({
      ...user, // 使用展开运算符复制所有现有属性
      email: e.target.value // 只更新email属性
    });
  };
  
  // 更新用户年龄
  const incrementAge = () => {
    setUser(prevUser => ({
      ...prevUser,
      age: prevUser.age + 1
    }));
  };
  
  // 添加新项目到数组
  const addItem = () => {
    const newItem = prompt('请输入新水果名称:');
    if (newItem) {
      // 添加到数组时，创建一个新数组
      setItems(prevItems => [...prevItems, newItem]);
    }
  };
  
  // 从数组中移除项目
  const removeItem = (index) => {
    setItems(prevItems => prevItems.filter((_, i) => i !== index));
  };

  return (
    <div className="hook-example">
      <h2>useState Hook 示例</h2>
      
      {/* 示例1: 字符串状态 */}
      <section>
        <h3>1. 基本字符串状态</h3>
        <input 
          type="text" 
          value={name} 
          onChange={handleNameChange} 
          placeholder="请输入名称"
        />
        <p>你好, {name || '游客'}!</p>
      </section>
      
      {/* 示例2: 数字状态 - 计数器 */}
      <section>
        <h3>2. 数字状态 (计数器)</h3>
        <div className="counter">
          <button onClick={decrementCount}>-</button>
          <span>{count}</span>
          <button onClick={incrementCount}>+</button>
        </div>
      </section>
      
      {/* 示例3: 布尔状态 - 切换 */}
      <section>
        <h3>3. 布尔状态 (开关)</h3>
        <div className="toggle">
          <span>状态: {isOn ? '开启' : '关闭'}</span>
          <button onClick={toggleSwitch}>
            {isOn ? '关闭' : '开启'}
          </button>
        </div>
      </section>
      
      {/* 示例4: 对象状态 */}
      <section>
        <h3>4. 对象状态</h3>
        <div className="user-info">
          <p>姓名: {user.name}</p>
          <p>年龄: {user.age} <button onClick={incrementAge}>+1岁</button></p>
          <p>
            邮箱: 
            <input 
              type="email" 
              value={user.email} 
              onChange={updateUserEmail} 
            />
          </p>
        </div>
      </section>
      
      {/* 示例5: 数组状态 */}
      <section>
        <h3>5. 数组状态</h3>
        <div className="items-list">
          <ul>
            {items.map((item, index) => (
              <li key={index}>
                {item}
                <button onClick={() => removeItem(index)}>删除</button>
              </li>
            ))}
          </ul>
          <button onClick={addItem}>添加水果</button>
        </div>
      </section>
      
      <div className="explanation">
        <h3>useState Hook 说明:</h3>
        <ul>
          <li><code>const [state, setState] = useState(initialValue)</code> - 声明一个状态变量和更新函数</li>
          <li>当状态更新时，组件会重新渲染</li>
          <li>对于依赖于之前状态的更新，使用函数式更新: <code>setState(prevState => newState)</code></li>
          <li>对于对象和数组，总是创建新的副本而不是直接修改</li>
          <li>状态更新是异步的，不要依赖刚设置的状态值</li>
        </ul>
      </div>
    </div>
  );
}

export default UseStateExample;